<template>
    <div class="initiateSecondment">
        <div class="header">
            <van-nav-bar title="发起借调" left-arrow @click-left="handleLeft">
                <template #right>
                    <div class="display" @click="recordClick">
                        <van-image :src="icon_jilu" class="menu_cion" />
                        <div class="record">记录</div>
                    </div>
                </template>
            </van-nav-bar>
        </div>
        <div class="product_list_serch-text">
            <van-search class="product_list_serch1" v-model="queryParams.content" shape="round" background="#F6FAFF"
                placeholder="请输入搜索内容" />
            <div class="product_list_serch2">
                <div>
                    <van-button class="product_list-btn" round @click="onRefresh">搜索</van-button>
                </div>
                <div class="product_list-btn-screen" @click="deptShow = true">
                    <div class="product_list-btn-screen-text">
                        {{ coreUserName }}
                        <van-image :src="heisexiasanjiao" class="screen_icons" />
                    </div>
                </div>
            </div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="warehouseList.length == 0 && !refreshing">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <van-swipe-cell v-for="(item) in warehouseList" :key="item.id">
                    <commodityList :data="item" @click="routerGo(item.outLogId)" />
                </van-swipe-cell>
            </van-list>
        </van-pull-refresh>
        <van-action-sheet title="借调部门" v-model:show="deptShow" :actions="deptList" @select="onSelectCategory" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, onActivated } from 'vue';
import { useRouter } from 'vue-router';
import { getProductList } from '@/api/operation/index'
import { queryOperationDeptList } from '@/api/productList/index.ts'
import { getEnvValue } from "@/utils/index";
import commodityList from './components/initiateSecondmentComponent.vue'
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href;
const icon_jilu = new URL("@/assets/operation/icon_jilu.png", import.meta.url).href;
const heisexiasanjiao = new URL("@/assets/productHome/icon_heisexiasanjiao.png", import.meta.url).href;
const router = useRouter();
const coreUserName = ref('选择借调部门')
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    content: undefined,
    coreUserId: ''
});
// 商品list
const warehouseList = ref<any>([])
// 列表
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

const deptShow = ref(false)
const deptList = ref<any>([])
const vantListScrollTop = ref<any>(0) // 滚动位置
/** 审批状态选择事件 */
const onSelectCategory = (selection) => {
    deptShow.value = false;
    coreUserName.value = selection.name === '全部' ? '选择借调部门' : selection.name
    queryParams.value.coreUserId = selection.status
    onRefresh()
}
// 在组件挂载完成后添加事件监听器
onMounted(() => {
    functionScroll('init')
})
// 在组件卸载前移除事件监听器
onUnmounted(() => {
    functionScroll('delete')
});
/** 缓存页面进度条 */
const functionScroll = (type: string) => {
    const dom: any = document.querySelector('.van-pull-refresh')
    if (type === 'init') {
        dom?.addEventListener('scroll', (e: any) => {
            vantListScrollTop.value = e.target.scrollTop
        })
    } else if (type === 'delete') {
        dom?.removeEventListener('scroll', () => { });
    } else if (type === 'black') {
        dom.scrollTop = vantListScrollTop.value
    }
}
onActivated(() => {
    functionScroll('black')
})
/** 记录 */
const recordClick = () => {
    router.push('/secondmentGoodsRecord')
}
/** 回退 */
const handleLeft = () => {
    router.push('/operation/operatepage')
}

/** 查询商品列表 */
const getList = async () => {
    const res = await getProductList({ ...queryParams.value });
    res.rows.forEach(element => {
        if (element.productImage) {
            element.productImage = getEnvValue("VITE_APP_PIC_URL") + element.productImage.split(',')[0]
        }
    });

    refreFlag.value = true
    // 空数据 停止加载
    if (res.rows.length == 0) {
        warehouseList.value = [];
        finished.value = true;
        return;
    }
    // 有数据 赋值列表 加载状态结束
    res.rows.forEach((item) => {
        finished.value = false;
        warehouseList.value.push(item);
    });
    loading.value = false;
    refreshing.value = false;
    // 如果list长度大于等于总数据条数，数据全部加载完成
    if (warehouseList.value.length >= res.total) {
        finished.value = true; //结束加载
    }
};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        warehouseList.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
// 跳转商品详情
const routerGo = (id: string) => {
    router.push({
        path: `/secondParticulars/${id}`
    })
}

const GetAnchorList = async () => {
    const { data = [] } = await queryOperationDeptList();
    data.forEach(item => {
        item.name = item.deptName
        item.status = item.deptId
    })
    deptList.value = [{ name: '全部', status: '' }, ...data]
}
GetAnchorList()
</script>
<style lang="less" scoped>
.initiateSecondment {
    height: 100vh;
    width: 100%;
    background: #F6FAFF;
    box-sizing: border-box;
    overflow: hidden;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .display {
        display: flex;
        align-items: center;

        .menu_cion {
            width: 14px;
            height: 16px;
        }

        .record {
            font-weight: 400;
            font-size: 14px;
            color: #0094FF;
            margin-left: 5px;
            line-height: 16px;
        }
    }

    .product_list_serch-text {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f6faff;
        height: 34px;
        margin-bottom: 10px;
        padding-top: 10px;
        position: relative;

        :deep(.van-search__field) {
            background-color: #fff;
            border-radius: 20px;
            padding-left: 10px;
        }

        .product_list_serch1 {
            display: flex;
            align-items: center;
            background: #f6faff;
            width: 70%;
            height: 34px;
            position: relative;

            :deep(.van-search__content) {
                height: 35px;
                padding-left: 0 !important;
            }

            :deep(.van-search__field) {
                height: 35px;
            }
        }

        .product_list_serch2 {
            display: flex;
            width: 30%;
            left: -10px;
            justify-content: center;
            align-items: center;

            .product_list-btn {
                width: 54px;
                height: 26px;
                font-size: 14px;
                color: #ffffff;
                border: none;
                background: #0094ff;
                white-space: nowrap;
                position: absolute;
                top: 14px;
                left: 51%;
            }

            .product_list-btn-screen {
                display: flex;
                width: 100%;
                display: flex;
                align-items: center;
            }

            .product_list-btn-screen-image {
                width: 13px;
                height: 15px;
                background-image: url("@/assets/home/icon_shaixuan.png");
                background-size: 100% 100%;
                //   background-size: 100% 100%;
            }

            .product_list-btn-screen-text {
                display: flex;
                align-items: center;
                height: 18px;
                font-size: 14px;
                color: #1a1b1c;
                margin-left: 5px;

                .screen_icons {
                    width: 10px;
                    height: 6px;
                    margin-left: 5px;
                }
            }
        }
    }

    :deep(.van-pull-refresh) {
        height: calc(100vh - 144px);
        overflow: scroll;
        background-color: #fff;
    }

    .nothing_div {
        width: 100%;
        margin: auto;
        text-align: center;
        padding-top: 20vh;
        font-weight: 400;
        font-size: 12px;
        color: #B8BECA;
        line-height: 12px;
        flex-wrap: wrap;

        .van-image {
            width: 160px;
            height: 160px;
        }
    }
}
</style>